@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  background: #202123;
}

@media (max-width: 720px) {
  pre {
    width: calc(100vw - 110px);
  }
}

pre:has(div.codeblock) {
  padding: 0;
}


@font-face {
  font-family: 'Manrope';
  src: url('Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url('./Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@keyframes plus-to-x {
  0% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(135deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

@keyframes x-to-plus {
  0% {
    transform: rotate(135deg);
  }
  45% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes scale {
  0%,
  20% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.50);
  }
}
